<template>
  <div class="index">
    <h1>房屋租赁管理系统</h1>
    <div class="chart-top">
      <div class="chart-left">
        <div class="chart-bar"></div>
      </div>
      <div class="chart-right">
        <div class="chart-pie"></div>
      </div>
    </div>
    <div class="chart-bottom">
      <div class="chart-line"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "Index",
  data() {
    return {
      barChart: null,
      pieChart: null,
      lineChart: null,
    };
  },
  mounted() {
    this.barChart = echarts.init(document.querySelector(".chart-bar"));
    this.pieChart = echarts.init(document.querySelector(".chart-pie"));
    this.lineChart = echarts.init(document.querySelector(".chart-line"));
    this.initBarChart();
    this.initLineChart();
    this.initPieChart();

    this.getHousingResourcesInfoList();
  },
  methods: {
    //获取数据
    async getHousingResourcesInfoList() {
      const res = await this.$api.getHousingResourcesInfoList({
        pageIndex: -1,
        pageSize: -1,
      });
      console.log(res);
      res.data.records.forEach((el) => {});
    },
    initBarChart() {
      this.barChart.setOption({
        title: {
          text: "一周房屋发布数量",
          left: "left",
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [10, 20, 20, 40, 10, 70, 50],
            type: "bar",
          },
        ],
      });
    },
    initLineChart() {
      this.lineChart.setOption({
        title: {
          text: "一周预约看房数量",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [10, 5, 9, 7, 3, 1, 2],
            type: "line",
          },
        ],
      });
    },
    async initPieChart() {
      //获取圆环图数据
      const res0 = await this.$api.getHousingResourcesInfoList({
        pageIndex: -1,
        pageSize: -1,
        renovation: 0,
      });
      const res1 = await this.$api.getHousingResourcesInfoList({
        pageIndex: -1,
        pageSize: -1,
        renovation: 1,
      });
      const res2 = await this.$api.getHousingResourcesInfoList({
        pageIndex: -1,
        pageSize: -1,
        renovation: 2,
      });
      this.pieChart.setOption({
        title: {
          text: "房源装修比列",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            data: [
              { value: res0.data.records.length, name: "毛坯" },
              { value: res1.data.records.length, name: "精装修" },
              { value: res2.data.records.length, name: "简装修" },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  padding: 20px;
  box-sizing: border-box;

  h1 {
    text-align: center;
  }

  .chart-top {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 20px;

    .chart-left,
    .chart-right {
      background-color: #fff;
      border-radius: 6px;
      padding: 20px;
      box-sizing: border-box;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .chart-bar,
      .chart-pie {
        width: 600px;
        height: 300px;
      }
    }
  }

  .chart-bottom {
    flex: 1;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 6px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .chart-line {
      width: 1200px;
      height: 300px;
    }
  }
}
</style>
